<template>
  <div class="table-box">
    <div style="position: relative; overflow: hidden; ">
      <div class="table-header">
        <el-form label-width="80px" :inline="true" :model="analysisLogform" class="form-inline">
          <el-form-item class="table-form-item" label="分析人">
            <el-select :clearable="true" v-model="analysisLogform.createBy" placeholder="请选择" size="mini">
              <el-option v-for="item in personSelections" :key="item.label" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item class="table-form-item" label="分析日期">
            <el-date-picker v-model="analysisLogform.time" :clearable="true" size="mini" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
        </el-form>
        <div class="form-button">
          <el-button type="primary" icon="el-icon-search" @click="search" size="mini">查询</el-button>
          <el-button @click="exportExcel" size="mini">保存报表</el-button>
        </div>
      </div>
    </div>
    <div class="table-content">
      <el-table :data="list" border height="428" size="mini">
        <el-table-column label="文件日期" prop="createTime" show-overflow-tooltip width="180" align="center" />
        <el-table-column label="司机号" prop="driverNum" show-overflow-tooltip align="center" />
        <el-table-column label="副司机号" prop="assisDriverNum" show-overflow-tooltip align="center" />
        <el-table-column label="车次" prop="trainNum" show-overflow-tooltip align="center" />
        <el-table-column label="机车号" prop="cabNum" show-overflow-tooltip align="center" />
        <el-table-column label="分析项目" prop="item" show-overflow-tooltip align="center" />
        <el-table-column label="分析内容" prop="content" show-overflow-tooltip align="center" />
        <el-table-column label="存在问题" prop="question" show-overflow-tooltip align="center" />
        <el-table-column label="分析意见" prop="opinion" show-overflow-tooltip align="center" />
        <el-table-column label="分析员" prop="createBy" show-overflow-tooltip align="center" />
        <el-table-column label="意见图片" align="center">
          <template slot-scope="scope">
            <el-popover v-if="scope.row.pic" trigger="hover" placement="top">
              <div>
                <img :src="scope.row.pic" />
              </div>
              <div slot="reference">
                <el-tag size="medium">查看</el-tag>
              </div>
            </el-popover>
            <span v-else>无图片</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import convert from '@/utils/convert';
import axios from 'axios';
export default {
  data() {
    return {
      baseUrl: '',
      analysisLogform: {
        time: [
          convert.dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss'),
          convert.dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
        ],
        createBy: '3'
      },
      locationSelections: [
        {
          key: '1',
          value: '本地'
        },
        {
          key: '2',
          value: '服务器'
        }
      ],
      personSelections: [
        {
          value: '0',
          label: '全部'
        },
        {
          value: '3',
          label: '本用户'
        }
      ],
      keywordsSelections: [
        {
          key: '1',
          value: '任意字段'
        },
        {
          key: '2',
          value: '车次'
        },
        {
          key: '3',
          value: '司机名'
        },
        {
          key: '4',
          value: '司机号'
        },
        {
          key: '5',
          value: '机车号'
        }
      ],
      recordId: ''
    };
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  computed: {
    totalSize: {
      get() {
        const size = this.list.reduce(
          (result, video) => result + video.size,
          0
        );
        return size;
      }
    }
  },
  created() {
    // this.getBaseUrl()
    this.recordId = this.$route.query.recordId?this.$route.query.recordId:''
    this.search();
  },
  methods:{
    // getBaseUrl(){
    //   axios.get('/api/index/quest_url').then(res => {
    //     this.baseUrl = res.data.data
    //   })
    // },
    search() {
      let times = this.analysisLogform.time;
      axios.get(`/api/ApiData/index?url=api/idx/analysisLog/list&method=GET&startTime=${times[0]}&recordId=7A669FE49343D3192FFE60590FB5ACAB&endTime=${times[1]}&userId=${this.analysisLogform.createBy}`).then(res => {
    //   axios
    //     .get(
    //       `${this.baseUrl}api/idx/analysisLog/list?startTime=${times[0]}&recordId=20192C83EAFAB119455A1B398B88080B&endTime=${times[1]}&userId=${this.analysisLogform.createBy}`
    // ,{ params: {},jsonp: 'callback'}).then(res => {
          console.log('getOutPut:', res);
        });
    },
    // search(){
    //   this.$emit('search',this.analysisLogform)
    // },
    exportExcel() {
      this.$emit('export', this.analysisLogform);
    }
  }
};
</script>

<style scoped>
.table-box::-webkit-scrollbar {
  display: none;
}
.table-box {
  height: 100%;
  overflow: scroll;
}
.table-header::-webkit-scrollbar {
  display: none;
}
.table-content {
  height: 88%;
}
.table-header {
  height: 12%;
  overflow: scroll;
  display: flex;
  justify-content: start;
  align-items: center;
  margin-bottom: 5px;
}
.table-form-item {
  margin-bottom: 0px;
  margin-right: 10px;
}
.form-button {
  display: flex;
}
/deep/.el-form-item__content {
  width: calc(100% - 80px);
}
.checkbox-group {
  padding-left: 0.1rem;
}
/deep/.el-form-item__content {
  width: auto;
}
</style>
